<template>
	<div class="AbnormalOrder ">
		<div class="top">	<span>按票种查询：</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="(item, key, index) in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select></div>
		<div class="bottom">
			<el-table :data="tableData6" :span-method="arraySpanMethod" :row-class-name="tableRowClassName" :cell-class-name="CellclassName"
			 :header-row-class-name="tabheadrow" border style="width: 100%">
				<el-table-column prop="id" width="80px" label="序号">
				</el-table-column>
				<el-table-column prop="okerorr" width="120px" label="异常类别">
				</el-table-column>
				<el-table-column prop="order" width="180px" label="订单号">
				</el-table-column>
				<el-table-column prop="amount1" width="250px" label="票种">
				</el-table-column>
				<el-table-column prop="amount2" width="150px" label="日期">
				</el-table-column>
				<el-table-column prop="amount3" width="80px" label="人数">
				</el-table-column>
				<el-table-column prop="amount4" label="金额">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				tableData6: [{
					id: '1',
					okerorr: "验证过期",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				}, {
					id: '1',
					okerorr: "超时未到达",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				}, {
					id: '1',
					okerorr: "景区原因",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				}, {
					id: '1',
					okerorr: "验证过期",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				}, {
					id: '1',
					okerorr: "超时未到达",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				}, {
					id: '1',
					okerorr: "景区原因",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				},{
					id: '1',
					okerorr: "景区原因",
					order: '201901120001',
					amount1: '套票（门票+观光车+温泉）',
					amount2: '2019-03-12',
					amount3: "10",
					amount4: "20000.00"
				}, {
					id: '合计',
					okerorr: '10',
					order: '20000',
				}, ]
			};
		},
		methods: {
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (row.id === "合计") {
					if (columnIndex === 0) {
						return [1, 5];
					}
				}

			},

			tableRowClassName({row,rowIndex,columnIndex}) {
				if (row.id === "合计") {
					return 'oneend-row';
					console.log(row.id)
				}
				if (rowIndex % 2 === 0) {
					return 'success-row';
				} 
				return '';
			},
			CellclassName({
				row,
				rowIndex,
				columnIndex
			}) {
				if (rowIndex % 2 === 0) {
					if (columnIndex != 0 && columnIndex != 3) {
						return 'cell-row';

					}
				}
				return ""
			},
			tabheadrow({
				row,
				rowIndex,
				columnIndex
			}) {
				return "tabhead-row"
			}
		}
	};
</script>

<style lang="less">
	.AbnormalOrder {
		padding: 30px 20px;
		box-sizing: border-box;

		.top {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.bottom {

			table tr td .cell,
			.el-table th>.cell {
				text-align: center;
				color: #000;
				height: 30px;
				line-height: 30px;
			}

			.el-table--border,
			.el-table--group,
			.el-table--border td,
			.el-table--border th,
			.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
				border-color: #8b8b8b;
			}

			.el-table--border::after,
			.el-table--group::after,
			.el-table::before {
				display: none;
			}

			.el-table td,
			.el-table th {
				height: 30px;
				padding: 0;
				line-height: 30px;
			}

			.el-table .el-table__row {
				background: #ffffcc;
			}

			.el-table .success-row {
				background: #cfc;
			}

			.el-table .oneend-row {
				background: #e4e4e4;
			}

			.el-table thead tr {
				background: #000 !important;
			}

			.el-table .cell-row {
				background: #fff !important;
			}

			.el-table .cell,
			.el-table th div {
				padding: 0;
			}
		}

	}
</style>
